<template>
    <view class="subscribe pb-200">
        <Navigation title="预约时间" background="#fff" />
        <view class="pt-12 tab">
            <u-tabs
                :list="typeList"
                @click="changeType"
                lineColor="#FABB3C"
                :activeStyle="{ color: '#222222', fontSize: '28rpx', fontWeight: '600' }"
                :inactiveStyle="{ color: '#999999', fontSize: '28rpx', fontWeight: '400' }"
                lineWidth="28rpx"
                lineHeight="6rpx"
                :itemStyle="{ width: '50%', height: '80rpx' }"
            ></u-tabs>
        </view>
        <view class="f ai-c ph-32 pv-32 address" v-show="type == 0">
            <image :src="detail.picUrl" class="w-100 h-100 b-14 mr-24"></image>
            <view class="f f1 fd-c">
                <view class="fs-32 fw-600 text-color4">{{detail.name}}</view>
				<!-- 距你直线距离500m， -->
                <view class="mt-8 fs-26 text-color2">{{detail.addressName}}{{detail.addressDetail}}</view>
            </view>
        </view>
        <view class="pv-32 ph-40 address" v-show="type == 1" @click="toAddress">
            <view class="mt-25" v-if="addressData">
                <view class="f ai-c jc-s-b">
                    <view class="f ai-c">
                        <view class="w-104 h-32 b-4 default f ai-c jc-c fs-22 text-color5" v-show="addressData.defaultStatus">默认地址</view>
                        <view class="ml-16 fs-28 fw-500 text-color4">{{ addressData.name }} {{ phoneNumbe(addressData.mobile) }}</view>
                    </view>
                    <image src="http://cwht.ricecs.cn/app/shop/edit.png" class="w-32 h-32"></image>
                </view>
                <view class="fs-24 text-color3 mt-16">地址：{{ addressData.areaName }}{{ addressData.detailAddress }}</view>
            </view>
			 <view v-else class="mt-32 fs-28 fw-500 text-color3">请选择地址~</view>
        </view>

        <!-- 医生 -->
        <view class="mt-20 ph-28 pv-28 f jc-s-b list b-24">
            <image :src="staff.avatar" class="w-120 h-120 b-12 mr-20 mt-10"></image>
            <view class="f fd-c f1">
                <view class="f ai-c jc-s-b w-f">
                    <view class="f ai-c f1">
                        <view class="fs-30 fw-600 text-color4">{{staff.name}}</view>
                        <view class="w-112 h-28 b-4 f ai-c jc-c fs-20 level ml-12">中级美容师</view>
                    </view>
                    <!-- <view class="w-144 h-56 b-56 fs-26 text-color5 f ai-c jc-c btn" @click="toSubscribe">立即预约</view> -->
                </view>
                <view class="f mt-16 ai-c">
                    <view class="f">
                        <image :src="index < staff.score ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                    </view>
                    <view class="fs-28 fw-600 text-color ml-12">{{staff.score}}</view>
                </view>
                <view class="f mt-16">
                  <view class="h-28 ph-6 fs-20 text-color8 mr-14 tag" v-for="(v,k) in staff.skillings">{{v}}</view>
                </view>
                <view class="f mt-12">
                    <view class="fs-24 text-color3">个人简介：</view>
                    <view class="f f1 text-ellipsis-1 text-color4 fs-24">{{staff.introduction}}</view>
                </view>
                <!-- <view class="f mt-12">
                    <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                    <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                </view> -->
            </view>
        </view>
        <!-- 时间 -->
        <view class="mt-20 b-24 date-box">
            <view class="ph-32 pt-32 pb-20 fs-36 fw-600 text-color4">到店时间</view>
            <u-scroll-list :indicator="false">
                <view class="date-list f h-110 ai-f-e pl-20">
                    <view
                        v-for="(item, index) in dateList"
                        :key="index"
                        class="mr-40 f fd-c w-96 ai-c"
                        :class="dateCurt == index ? 'active' : ''"
                        @click="changeDate(index)"
                    >
                        <view class="fs-28 text-color4 week">{{ item.week }}</view>
                        <view class="fs-24 text-color3 mt-4 date">{{ item.date }}</view>
                        <view class="w-56 h-6 mt-10 b-3 heng"></view>
                    </view>
                </view>
            </u-scroll-list>
            <view class="f fc-w ph-32 pv-32">
                <view
                    v-for="(item, index) in timeList"
                    :key="index"
					v-show="item"
                    class="w-159 h-64 b-64 mr-16 time-box fs-26 text-color4 f ai-c jc-c mb-24"
                    :class="timeCurt == index ? 'time-active' : ''"
                    @click="changeTime(index)"
                    >{{ item }}</view
                >
            </view>
        </view>

        <view class="f ai-c jc-s-b bot h-168 w-f pl-32 pr-40" :style="{ paddingBottom: safeAreaBottom + 'px' }">
            <view>
                <view>
                    <text class="fs-36 fw-600 price-color mr-12">¥{{shop.price}}</text>
                    <text class="fs-22 text-color3 old-price">¥{{shop.price+shop.discountPrice}}</text>
                </view>
                <view class="fs-22 text-color3">优惠：¥{{shop.discountPrice}}</view>
            </view>
            <view class="w-300 h-72 b-80 fs-28 fw-500 text-color5 btn f ai-c jc-c" @click="toConfirmOrder">下一步</view>
        </view>
    </view>
    <!-- 回到顶部 -->
    <ToTop />
</template>
<script setup lang="ts">
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import { ref } from 'vue';
import { phoneNumbe } from '@/utils/global';
import { onLoad,onShow } from '@dcloudio/uni-app';
import { storeDetail } from '@/services/api/shop/index';
import { addressGetDefault } from '@/services/api/address';
const id = ref(null);
const sub_id = ref(null);
const staff = ref<any>({});
const shop = ref<any>({});
const detail = ref<any>({});
const addressData = ref<any>({
	addressName:'',
	mobile:'',
	name:'',
	detailAddress:'',
	areaName:'',
});
const params = ref<any>({
    addressId: null,
});
onLoad((options: any) => {
    id.value = options.id;
    sub_id.value = options.sub_id;
	// getStaff()
	getStore()
	staff.value = uni.getStorageSync('subscribe')
	shop.value = uni.getStorageSync('shop')
});
onShow(() => {
    let pages = getCurrentPages();
    let currPage: any = pages[pages.length - 1];
    let addressDatas = currPage.data.addressData;

    //选择地址
    if (addressDatas) {
        addressData.value = addressDatas;
        params.value.addressId = addressData.value.id;
    } else {
        getDefaultAddress();
    }
});
const typeList = [
    {
        name: '到店',
    },
    {
        name: '上门',
    },
];
const type = ref(0);
const dateCurt = ref(0);
const timeCurt = ref(0);
const changeType = (data: any) => {
    type.value = data.index;
};
const dateList = getDateList();
const timeList = generateTimes();

async function getStore() {
    const { data } = await storeDetail({ storeId: id.value });
    detail.value = data;
}
const changeDate = (data: number) => {
    dateCurt.value = data;
};
const changeTime = (data: number) => {
    timeCurt.value = data;
};
const toConfirmOrder = () => {
	if( params.value.addressId== null && type.value == 1){
		uni.showToast({
			title: '请选择地址',
			icon: 'none'
		})
	}
	let sub_buy = {
		store_id :id.value,
		addressId :params.value.addressId,
		type :type.value,
		date :dateList[dateCurt.value],
		times :timeCurt.value,
		pointStatus: false,
		timesName :timeList[timeCurt.value],
	}
	uni.setStorageSync('sub_buy',sub_buy)
	uni.setStorageSync('addressData',addressData)
	// params.value.store_id  = id.value;
    uni.navigateTo({
        url: '/pages_serve/confirmOrder/index',
    });
};
//获取默认地址
async function getDefaultAddress() {
    const { data } = await addressGetDefault({});
	if(data){
		addressData.value = data;
		params.value.addressId = addressData.value.id;
	}
    
}
//跳转地址
function toAddress() {
    uni.navigateTo({
        url: `/pages_mine/myAddress?type=select`,
    });
}

function generateTimes() {
	let timeArrays = new Array(24).fill("");
	timeArrays.forEach((item, index) => 
		timeArrays[index] = index <9 ? '' : (index < 10 ? '0' + index : index) + ':00'
	);
	 return timeArrays;
}
function getDateList(){
	// 创建一个新的 Date 对象表示当前时间
	var currentDate = new Date();
	// 设置为往后一周的日期（7天）
	// currentDate.setDate(currentDate.getDate() + 6);
	let dateList = []
	for (let i = 0; i < 7; i++) {
	    currentDate.setDate(currentDate.getDate() + 1); 
		dateList.push({
			week: getWeekDayName(currentDate.getDay()),
			date: formatDate(new Date(currentDate))
		})
	}
	return dateList;
}

// 格式化星期输出
function getWeekDayName(weekDayNumber: number) {
    const weekDays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return weekDays[weekDayNumber];
}
 
// 格式化日期输出
function formatDate(date:any) {
    var year = date.getFullYear(); // 年份
    var month = (1 + date.getMonth()).toString().padStart(2, '0'); // 月份（范围从0-11，需要加上1转换成正常的月份）
    var day = date.getDate().toString().padStart(2, '0'); // 日期
    
    return `${month}-${day}`;
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.subscribe {
    background: #f2f2f2;
    min-height: 100vh;
    .old-price {
        text-decoration: line-through;
    }
    .price-color {
        color: #ec5330;
    }
    .time-box {
        background: #f5f5f5;
    }
    .time-box:nth-child(4n) {
        margin-right: 0;
    }
    .time-active {
        background: #faf5e6;
        color: #fabb3c;
    }
    .date-box {
        background: #fff;
        .date-list {
            border-bottom: 1px solid #f5f5f5;
        }
        .active {
            .date {
                color: #222222;
            }
            .heng {
                background: #fabb3c;
            }
            .week {
                font-weight: 600;
            }
        }
    }
    .list {
        border: 1rpx solid #dddddd;
        background: #fff;
    }
    .tag2 {
        background: #f0f2f5;
        color: #5769a0;
    }
    .tag {
        background: #fff5f5;
    }
    .btn {
        background: #fabb3c;
    }
    .tab {
        background: #fff;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        z-index: 111;
        .btn {
            background: #fabb3c;
        }
    }

    .background-white {
        background: #fff;
    }
    .address {
        background: #fff;
        border-radius: 0 0 24rpx 24rpx;
    }
    .default {
        background: #f54040;
    }
}
</style>
